<style type="text/css">
	.layui-tab{
		margin-left: 215px;
	}
	.postlist{
		width: 100%;
		height: 300px;
		background-color: #fff;
	}
	
	.postlist .postheader, .postcontent{
		width: 100%;
		display: flex;
		font-size: 14px;
	}
	
	.postlist .postheader .header-tile,.header-content,.header-caozuo,.post-tile,.post-content,.post-caozuo{
		line-height: 20px;
		padding: 9px 15px;
		border: 1px solid #eee;
		color: #666;
	}
	
	.header-tile,.post-tile{
		width: 20%;
	}
	.header-content,.post-content{
		width: 55%;
	}
	
	.header-caozuo,.post-caozuo{
		width: 25%;
	}
	
	.post-content{
		padding-bottom: 0px;
		height: 58px;
		overflow: hidden;
		/* 弹性伸缩盒子模型显示 */
		display: -webkit-box;
		/* 设置和检索伸缩盒子对象的子元素的排列方式 */
		-webkit-box-orient: vertical;
		/* 限制在一个块级元素显示的文本行数 */
		-webkit-line-clamp: 3;
		text-overflow:ellipsis;

	}
	
	
</style>
<div class="layui-container fly-marginTop fly-user-main">
    
    {include file='common/menu'/}
	
	<div class="layui-tab layui-tab-brief" lay-filter="user">
	      <ul class="layui-tab-title" id="LAY_mine">
	        <li data-type="mine-jie" class="{$cateid == '' ? 'layui-this' : ''}">
				<a href="{:url('home/User/collect')}">全部</a>
			</li>
			{foreach $CateList as $item}
				<li data-type="collection" class="{$cateid == $item.id ? 'layui-this' : ''}">
					<a href="{:url('home/User/collect',['cateid' => $item.id])}" >{$item.name}</a>
				</li>
			{/foreach}
	      </ul>
	      <div class="layui-tab-content" style="padding: 20px 0;">
	        <div class="layui-tab-item layui-show">
			<!--  -->
			<div class="postlist">
				<div class="postheader">
					<div class="header-tile">标题</div>
					<div class="header-content">内容</div>
					<div class="header-caozuo">操作</div>
				</div>
				{foreach $CollectList as $item}
				<div class="postcontent">
					<div class="post-tile">{$item.post.title}</div>
					<div class="post-content">{$item.post.content}</div>
					<div class="post-caozuo" style="display: flex;">
						<a href="{:url('home/index/info',['postid' => $item.post.id])}" type="button" class="layui-btn">查看帖子</a>
						<a href="#" type="button" data-id="{$item.id}" class="layui-btn delshou">取消收藏</a>
					</div>
				</div>
				{/foreach}
			</div>
			 
	          <div id="LAY_page"></div>
	        </div>
	        <div class="layui-tab-item">
	          <ul class="mine-view jie-row">
	            <li>
	              <a class="jie-title" href="../jie/detail.html" target="_blank">基于 layui 的极简社区页面模版</a>
	              <i>收藏于23小时前</i>  </li>
	          </ul>
	          <div id="LAY_page1"></div>
	        </div>
	      </div>
	    </div>
</div>
<script type="text/javascript">
	layui.use(['layer'],function(){
		var $ = layui.jquery,
		layer = layui.layer
		
		// 取消收藏帖子
		$('.delshou').click(function(){
			var collectid = $(this).data('id')
			
			layer.confirm('确定取消收藏帖子？',{icon:3},function(index){
				
				// 发起请求
				$.ajax({
				  type:'post',
				  url:`{:url('home/post/delshou')}`,
				  data:{
					collectid
				  },
				  dataType:'json',
				  success:function(res)
				  {
					if(res.code === 1)
					{
					  layer.msg('取消收藏成功',{icon: 1},function(index){
						location.href = res.url
					  })
					}else{
					  layer.msg(res.msg,{icon: 5},function(){
						location.href = res.url
					  })
					}
				  }
				})
				
				layer.close(index)
				
			})
		})
	})
</script>